<template>
    <div id="mirror-manage">
        <div class="jx-manage-list" v-if="manageListData.length > 0">
            <swiper :options="swiperOption" class="swiper-no-swiping">
                <swiper-slide v-for="(item, index) in manageListData" :key="index">
                    <div class="jx-manage-box">
                        <div class="jx-manage-close" @click="Delete(item.imageId)">x</div>
                        <div class="jx-manage-info">
                            <img :src="item.iconUrl" />
                            <p class="jx-manage-title" v-text="item.imageName"></p>
                            <p class="jx-manage-name" v-if="item.imageSource == 2" v-text="item.username"></p>
                        </div>
                        <div class="jx-manage-text" v-text="item.description"></div>
                        <div class="jx-manage-modify" @click="ModifyMirror(item)">
                            <i class="iconfont icon-ico_compile_thick"></i>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
            <div class="swiper-btn swiper-button-prev" slot="button-prev" v-if="manageListData.length > 4">
                <i class="iconfont icon-xiangzuo-copy"></i>
            </div>
            <div class="swiper-btn swiper-button-next" slot="button-next" v-if="manageListData.length > 4">
                <i class="iconfont icon-xiangyou"></i>
            </div>
        </div>
        <div class="jx-content-tips" v-else>
             <img src="./../../../assets/images/index_no_data.png" />
            <p>暂无内容</p>
        </div>
        <div class="jx-manage-tips">
            <p>提示 : </p>
            <p>1.管理员设置每门课程镜像最大保存数量为‘{{saveNum}}’，教师在每门课程下能够管理的镜像不能多于该数字。若现存的镜像数量大于‘{{saveNum}}’系统不会自动删除现存镜像，但是无法保存新镜像。</p>
            <p>2.课程发布后镜像可以被其他教师使用。</p>
            <p>3.镜像可以被删除，删除该镜像会导致在‘课程模板’功能中已分配的课程章节中的镜像也被删除，请谨慎操作。</p>
            <p>4.删除‘使用’的镜像后，如使用该镜像的课程章节需要继续进行教学，请在‘课程模板’功能中重新为该课程章节分配镜像。</p>
        </div>
        <el-dialog :close-on-click-modal="false" class="dialog-add-distribution" title="修改镜像信息" :visible.sync="dialogMirrorInfo" v-if="dialogMirrorInfo" width="820px">
            <el-form  label-width="100px" :rules="MirrorFormRules" :model="MirrorForm" ref='MirrorForm'>
                <el-form-item label="镜像名称：" prop="MirrorName">
                    <el-input type="text" v-model="MirrorForm.MirrorName" maxlength="20" @input="MirrorNameInput"></el-input>
                    <p style="position:absolute; left:240px; top: 12px;"> {{MirrorForm.MirrorNameNum}}/20</p>
                </el-form-item>
                <div>
                    <span class="label" style="margin:6px 0 0px 8px"><span style="color:#F56C6C">*</span> 镜像图标：</span>
                    <div class="distribution-swpier">
                        <swiper :options="swiperDialogOption" >
                            <swiper-slide v-for="(item, index) in iconListData" :key="index">
                                <div class="distribution-box" @click="IconChange(item.icon)">
                                    <img :src="item.iconUrl" />
                                    <i class="iconfont icon-zhengque" v-if="item.icon == MirrorForm.iconId"></i>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div class="swiper-btn swiper-button-prev" slot="button-prev" v-show="iconListData.length > 5">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </div>
                        <div class="swiper-btn swiper-button-next" slot="button-next" v-show="iconListData.length > 5">
                            <i class="iconfont icon-xiangyou"></i>
                        </div>
                    </div>
                </div>
                <div class="clear-fix"></div>
                <el-form-item label="镜像简介：" prop="MirrorDesc">
                    <el-input type="textarea" v-model="MirrorForm.MirrorDesc" maxlength="200" @input="MirrorDescInput"></el-input>
                    <p style="position:absolute; left: 610px; bottom: 0px;"> {{MirrorForm.MirrorDescNum}}/200</p>
                </el-form-item>

                <div class="footer" style="text-align:center;">
                    <el-button class="button-style saveBtn" @click="MirrorFormSave('MirrorForm')">保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    name: 'carrousel',
    data () {
        return {
            // 管理列表轮播组件data
            swiperOption: {
                slidesPerView: 4,
                spaceBetween: 30,
                loop: false,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            // 管理弹窗轮播组件data
            swiperDialogOption: {
                slidesPerView: 5,
                spaceBetween: 24,
                initialSlide: 1,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            iconListData: '',
            // 课程ID
            coursesId: '',
            listHeight1: '240px',
            manageListData: '',
            // 镜像信息弹窗
            dialogMirrorInfo: false,
            // 镜像表单
            MirrorForm: {
                // 镜像名称
                MirrorName: '',
                // 镜像名称长度
                MirrorNameNum: 20,
                // // 镜像类型
                // MirrorTypeOptions: [
                //     {
                //         label: '语言类',
                //         value: 1
                //     },
                //     {
                //         label: 'Hadoop生态',
                //         value: 2
                //     },
                //     {
                //         label: '机器学习',
                //         value: 3
                //     }
                // ],
                // MirrorTypeValue: '',
                // 镜像简介
                MirrorDesc: '',
                // 镜像简介长度
                MirrorDescNum: 200,
                // 选中的镜像图标ID
                iconId: '',
                // 镜像ID
                imageId: ''
            },
            MirrorFormRules:{
                MirrorName: [
                    { required: true, message: '请输入镜像名称', trigger: 'blur' },
                ],
                MirrorDesc: [
                    { required: true, message: '请输入镜像简介', trigger: 'blur' },
                ]
            },
            // 是否强删值
            force: false,
            saveNum: ''
        }
    },
    created () {
        let self = this
        // 课程ID
        self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
        // 初始化镜像列表
        self.InitImageList()
        // 初始化判断课程Nav
        self.initNav()
        self.InitQuota()
    },
    methods: {
         // 初始化判断课程Nav
        initNav(){
            let self = this
            self.$http.get('/tes/course/'+ self.coursesId+'/chapter/list/owner').then((response) => {
                let res = response.data
                if(res.code == '200') {
                    if(res.data.length > 0){
                        //已经有章节,判断导航显示
                        self.$parent.$parent.mark = false
                        self.$parent.$parent.chaperFlag = false
                    }else{
                        self.$parent.$parent.mark = true
                        self.$parent.$parent.chaperFlag = false
                    }
                }else if(res.code == '404'){
                    //暂无章节,判断导航显隐藏
                    self.$parent.$parent.mark = true
                    self.$parent.$parent.chaperFlag = false

                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                self.$message.error(res.message)
            })
        },
        // 查询镜像列表
        InitImageList(){
            let self = this
            self.$http.get('/tes/image/course/'+self.coursesId).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.manageListData = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        InitQuota(){
            let self = this
            self.$http.get('/tes/image/quota').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.saveNum = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 修改弹窗
        ModifyMirror(item){
            let self = this
            self.MirrorForm.MirrorName = ''
            self.MirrorForm.MirrorNameNum = 20
            self.MirrorForm.iconId = ''
            self.MirrorForm.MirrorDesc = ''
            self.MirrorForm.MirrorDescNum = 200
            self.swiperDialogOption.initialSlide = 1
            self.iconListData = ''

            self.$http.get('/tes/image/icon').then(response => {
                let res = response.data
                if(res.code == '200') {
                    self.iconListData = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
            self.$http.get('/tes/image/'+item.imageId) .then((response) => {
                let res = response.data
                if(res.code == '200') {
                    let iconIdIndex
                    // 镜像名称
                    self.MirrorForm.MirrorName = res.data.imageName
                    // 镜像名称长度
                    self.MirrorForm.MirrorNameNum = 20 - res.data.imageName.length
                    // 镜像类型
                    // self.MirrorForm.MirrorTypeValue = res.data.imageType
                    // 镜像简介
                    self.MirrorForm.MirrorDesc = res.data.description
                    // 镜像简介长度
                    self.MirrorForm.MirrorDescNum = 200 - res.data.description.length
                    // 选中的镜像图标ID
                    self.MirrorForm.iconId = res.data.icon
                    // 镜像ID
                    self.MirrorForm.imageId = res.data.imageId
                    iconIdIndex = self.indexOfFn(self.iconListData,self.MirrorForm.iconId)

                    self.swiperDialogOption =  {
                        slidesPerView: 5,
                        spaceBetween: 24,
                        initialSlide: iconIdIndex,
                        loop: false,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    }
                    self.dialogMirrorInfo = true
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                    console.log(err)
            })

        },
        indexOfFn(arr,item){
                for(let i = 0; i < arr.length; i++){
                    if(arr[i].icon == item){
                        return i;
                    }
                }
            },
        // 图标切换
        IconChange(id){
            let self = this
            self.MirrorForm.iconId = id
        },
        // 删除镜像
        Delete(imageId){
            let self = this
            self.$confirm('是否删除选中?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                self.DeleteAxios(imageId)
            }).catch(() => {
            })
        },
        DeleteAxios(imageId){
            let self = this
            self.$http.delete('/tes/image/'+imageId+'?force='+self.force).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    self.force = false
                    // 初始化镜像列表
                    self.InitImageList()
                }else if(res.code == '500400'){
                    // 强制删除提示
                    self.$confirm(res.message, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        self.force = true
                        self.DeleteAxios(imageId)
                    }).catch(() => {
                    })
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 镜像名称
        MirrorNameInput(){
            let self = this
            let MirrorTextLength = self.MirrorForm.MirrorName.length
            self.MirrorForm.MirrorNameNum = 20 - MirrorTextLength
        },
        // 镜像简介
        MirrorDescInput(){
            let self = this
            let MirrorTextLength = self.MirrorForm.MirrorDesc.length;
            self.MirrorForm.MirrorDescNum = 200 - MirrorTextLength
        },
        // 修改镜像保存
        MirrorFormSave(form){
            let self = this
            self.$refs[form].validate((valid) => {
                if (valid) {
                    self.$http.put('/tes/image/'+self.MirrorForm.imageId,{
                        imageName: self.MirrorForm.MirrorName,
                        icon: self.MirrorForm.iconId,
                        // imageType: self.MirrorForm.MirrorTypeValue,
                        description: self.MirrorForm.MirrorDesc
                    }).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            self.dialogMirrorInfo = false
                            // 初始化镜像列表
                            self.InitImageList()

                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            })
        },
    }
}
</script>

<style lang="scss">
    #mirror-manage{
        // 镜像信息弹窗
        .dialog-add-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                .el-form-item{
                    position: relative;
                    .el-form-item__content{
                        height: auto;
                    }
                    .el-input{
                        .el-input__inner{
                            width:230px;
                        }
                    }
                    .el-textarea{
                        height: 180px;
                        .el-textarea__inner{
                            width:600px;
                            resize: none;
                        }
                    }
                }
            }
            .distribution-swpier{
                position: relative;
                width: 700px;
                height: 64px;
                margin-bottom: 35px;
                margin-left: 55px;
                margin-top: 15px;
                .swiper-btn{
                    background-image: none;
                    outline: 0;
                    top: 46px;
                    i{
                        font-size: 20px;
                        color: #b1b1b1;
                        &:hover{
                            color: #474747;
                        }
                    }
                }
                .swiper-button-prev{
                    left: -35px;
                }
                .swiper-button-next{
                    right: -35px;
                }
            }
            .distribution-box{
                position: relative;
                width: 100%;
                height: 64px;
                line-height: 64px;
                background: #fff;
                border: solid 1px #d9d9d9;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
                &:hover{
                    border-color: #1277eb;
                }
                i{
                    position: absolute;
                    bottom: 28px;
                    right: 8px;
                    font-size: 14px;
                    color: #3fdb9b;
                    width: 14px;
                    height: 14px;
                }
            }
        }
        .jx-manage-list{
            .swiper-container{
                width: 960px;
            }
        }
    }
</style>

<style lang="scss" scoped>
    #mirror-manage{
        .jx-content-tips{
            text-align: center;
            margin-top: 100px;
            &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
        .jx-manage-list{
            width: 960px;
            height: 240px;
            margin: 70px auto 0;
            position: relative;
            .jx-manage-box{
                width: 100%;
                height: 240px;
                // background: #3e4562;
                border: solid 1px #e8e8e8;
                box-sizing: border-box;
                border-radius: 5px;
                position: relative;
                overflow: hidden;
                &:hover{
                    border-color: #1277eb;
                }
                .jx-manage-close{
                    position: absolute;
                    color: #385899;
                    right: 10px;
                    top: 5px;
                    line-height: 1;
                    cursor: pointer;
                    font-size: 16px;
                }
                .jx-manage-info{
                    margin-top: 30px;
                    text-align: center;
                    img{
                        width: 155px;
                    }
                    .jx-manage-title{
                        font-size: 14px;
                        color: #474747;
                        margin-top: 14px;
                    }
                    .jx-manage-name{
                        font-size: 12px;
                        color: #727272;
                        margin-top: 6px;
                    }
                }
                .jx-manage-text{
                    width: 80%;
                    margin-top: 22px;
                    margin: 22px auto 0;
                    color: #727272;
                    font-size: 12px;
                    height: 60px;
                    overflow: hidden;
                    line-height: 18px;
                    overflow-y: scroll;
                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #9fa2b1;
                    }
                }
                .jx-manage-modify{
                    position: absolute;
                    right: 10px;
                    bottom: 0;
                    cursor: pointer;
                    i{
                        color: #385899;
                        font-size: 14px;
                    }
                }
            }
            .jx-manage-list-button{
                position: absolute;
                cursor: pointer;
                top: 100px;
                &.prev{
                    left: -80px;
                }
                &.next{
                    right: -80px;
                }
                i{
                    font-size: 44px;
                    color: #d9d9d9;
                }
                &:hover{
                    i{
                        color:#757575;
                    }
                }
            }
            .swiper-btn{
                background-image: none;
                outline: 0;
                i{
                    font-size: 40px;
                    color: #b1b1b1;
                    &:hover{
                        color: #474747;
                    }
                }
            }
            .swiper-button-prev{
                left: -65px;
            }
            .swiper-button-next{
                right: -65px;
            }
        }
        .jx-manage-tips{
            width: 80%;
            margin: 60px auto 0;
            p{
                font-size: 14px;
                color: #385899;
                line-height: 18px;
            }
        }
    }
</style>

